<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="referrer" content="no-referrer" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
      background-color: #ddd;
    }

    li {
      list-style-type: none;
    }

    .container {
      width: 1000px;
      margin: 0 auto;
    }

    .container ul {
      width: 1100px;
    }

    .container ul::after {
      content: "";
      clear: both;
      display: block;
    }

    .container ul li {
      float: left;
      height: auto;
      margin: 0 20px 20px 0;
      border-top: 0 none;
      background-color: #fff;
      border-radius: 2px;
      width: 235px;
    }

    .container ul li img {
      width: 100%;
    }

    .container ul li p {
      width: 100%;
      line-height: 40px;
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <!-- 瀑布流容器 -->
  <div class="container">
    <!-- 瀑布流定位容器 -->
    <ul class="wrapper">
      <!-- 每个瀑布流元素 -->
      <!-- <li>
        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg" alt="">
        <p>粘土手作希小怪</p>
      </li>
      <li>
        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg" alt="">
        <p>粘土手作希小怪</p>
      </li>
      <li>
        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg" alt="">
        <p>粘土手作希小怪</p>
      </li>
      <li>
        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg" alt="">
        <p>粘土手作希小怪</p>
      </li> -->
    </ul>
  </div>


  <script src="./javascripts/libs/jquery.js"></script>
  <script src="./javascripts/jquery.waterfall.js"></script>
  <script>
    // 瀑布流实现需求：
    //   1、ajax请求数据，渲染页面
    //   2、根据高度不同，自动排列位置 (封装位置函数)
    //   3、当滚动页面到最后一张图片之前时，ajax请求加载数据
    //   4、重复 3 操作 滚动页面加载数据
    //   5、注意：当滚动到最后一个在去加载数据


    // 1. 发起请求渲染页面;
    $(function () {
      //1. 记录最后一个元素;
      var last_ele = null;
      // 2. 页面的高度获取;
      var clientHeight = document.body.clientHeight;
      // 3. 限制加载的变量(标记当前的加载状态);
      var loading = false;
      // 4. 接口数据;
      var next_start = 0;

      // 1. 发起请求;
      $.ajax({
        url: "http://localhost:3000/dt",
        data: {
          include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
          filter_id: "手工DIY",
          start: next_start,
          _: Date.now()
        }
      })
        .then(function (res) {
          // 测试数据是否可以正常获取;
          // console.log(res);
          render(res.data.object_list);

          $(".wrapper li").waterFall({
            max_col: 4
          });

          // 最后一个元素高度此时才有;
          last_ele = $(".wrapper li:last");

          next_start = res.data.next_start;
        })

      // 2. 渲染页面;
      function render(list) {
        // 1. 根据数据拼接字符串;
        var html = "";
        for (var i = 0; i < list.length; i++) {
          // 当前图片的宽度;
          var n_w = 235;
          // 图片实际的宽度;
          var w = list[i].photo.width;
          // 图片的实际高度;
          var h = list[i].photo.height;
          // 当前图片的高度;
          var n_h = n_w / w * h;

          html += `<li>
            <img src="${list[i].photo.path}" height=${parseInt(n_h)}>
            <p>${list[i].msg}</p>
          </li>`
        }
        // 2. 把字符串放入页面之中;
        $(".wrapper").append(html);
      }

      // 无限加载 ： 
      // 数据 : 
      //  1. 最后一个元素的offsetTop值;
      //  2. 页面的高度; 
      //  3. scrollTop;

      $(document).on("scroll", throttling(function () {
        // console.log(1);
        // 安全逻辑 : 如果 最后一个元素为null, 我们应该直接跳出逻辑;或者loading为false
        if (!last_ele || loading) {
          return false;
        }
        // 如果 页面的高度 + scrollTop 大于等于 最后一个元素的高度; 需要加载数据了;
        if (clientHeight + $("html,body").scrollTop() >= last_ele.offset().top) {
          // 逻辑 : 加载如果没有结束，就不再发起新的请求;
          loading = true;
          // 发送请求，渲染页面，瀑布流排序;
          $.ajax({
            url: "http://localhost:3000/dt",
            data: {
              include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
              filter_id: "手工DIY",
              start: next_start,
              _: Date.now()
            }
          })
            .then(function (res) {
              // 测试数据是否可以正常获取;
              render(res.data.object_list);

              $(".wrapper li").waterFall({
                max_col: 4
              });

              // 最后一个元素高度此时才有;
              last_ele = $(".wrapper li:last");
              // 改变加载的值
              loading = false;
              next_start = res.data.next_start;
            })
        }
      }, 200))

      // 事件 节流: 
      function throttling(callback, delay) {
        var t = null;
        return function () {
          if (t !== null) {
            return false;
          }
          t = setTimeout(function () {
            t = null;
            callback();
          }, delay)
        }
      }
    })
  </script>
</body>

</html>